<template>
	<view id="app">
		<!-- 头部背景 -->
		<view class="topBg detail plr30">
			<!-- 内容 -->
			<view class="wrap df aic mt50">
				<!-- 图片 -->
				<view class="img wh45">
					<image src="/static/clock.png" mode="aspectFit"></image>
				</view>
				<view class="state ml20 f30">{{state_name[wrap.status - 1]}}</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="proDesc area mt30 mlr30 plr25 bw">
			<!-- 商家 -->
			<view class="rows ptb20 f28 bdb1se">
				<view class="col df f1">
					<!-- 商家头像 -->
					<view class="proImg wh40">
						<image src="/static/logo.png" mode="aspectFill"></image>
					</view>
					<!-- 商家名称 -->
					<view class="txt ml10 c333">神州通信器材</view>
				</view> 
				<view class="col">
					<uni-icons type="phone" color="#FF9646"></uni-icons>
					<text class=" cff9646">联系商家</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="proInfo df ais ptb35">
				<!-- 商品图片 -->
				<view class="proImg img180">
					<image :src="wrap.image" mode="aspectFill" lazy-load></image>
				</view>
				<!-- 商品信息 -->
				<view class="proInfo df dfc dfsb oh ml20 f1">
					<!-- 商品名称 -->
					<view class="title t2hd c333 f32">{{wrap.goods_name}}</view>
					<!-- 申请时间 -->
					<view class="time c999 f28">申请时间：{{wrap.createtime}}</view>
					<!-- 价格 -->
					<view class="price cFF9646 f28">￥{{wrap.price}}</view>
				</view>
			</view>
		</view>

		<!-- 订单切换 -->
		<view class="orderDesc area mt30 mlr30 ptb30 plr30 c666 f28">
			<!-- 商品返利比例 -->
			<view class="rows">
				<view class="col w230">商品返利比例</view>
				<view class="col ml10 f1">{{wrap.fanli ? wrap.fanli : 0}}%</view>
			</view>

			<!-- 商家确认合作时间 -->
			<view class="rows">
				<view class="col w230">商家确认合作时间</view>
				<view class="col ml10 f1">{{wrap.shoptime}}</view>
			</view>

			<!-- 用户确认合作时间 -->
			<view class="rows">
				<view class="col w230">用户确认合作时间</view>
				<view class="col ml10 f1">{{wrap.usertime}}</view>
			</view>

			<!-- 用户解除合作时间 -->
			<view class="rows">
				<view class="col w230">用户解除合作时间</view>
				<view class="col ml10 f1">{{wrap.shoptime1}}</view>
			</view>

			<!-- 商家解除合作时间 -->
			<view class="rows">
				<view class="col w230">商家解除合作时间</view>
				<view class="col ml10 f1">{{wrap.usertime1}}</view>
			</view>
		</view>

		<!-- 底部支付 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 2">
			<view class="btn cancel w200" @click="put">提出异议</view>
			<view class="btn prmary ml20 w200">确认合作</view>
		</view>

		<!-- 底部支付 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 3">
			<view class="btn prmary ml20 w200" @click="cancel">解除合作</view>
		</view>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				state_name: ['待处理', '待合作', '合作中', '已取消', '已解除合作'],
				// 内容
				wrap: {
					// 订单状态 1待处理 2待合作 3合作中 4已取消 5已解除合作
					status: 1,
					image: '/static/2866.png',
					goods_name: '95新 华为Mate Xs/mate X2 5G折叠屏手机',
					price: 296,
					cancel_time: '2021-06-20 15:30',
					createtime: '2021-06-20 15:30',
					fanli: 12,
					shoptime: '2021-12-20 15:30',
					usertime: '2021-12-20 15:30',
					shoptime1: '2021-12-20 15:30',
					usertime1: '2021-12-20 15:30',
				},
				// 订单id
				id: '',
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断有无id
			if (e.id) {
				// 赋值id
				that.id = e.id;
			}

			// 订单详情
			that.order_detail();

			// 更改标题
			uni.setNavigationBarTitle({
				title: that.state_name[that.wrap.status - 1],
			})
		},

		// 方法集
		methods: {
			// 取消订单
			cancel() {
				// 弹窗提示
				that.alert({
					value: '解除之后则您的所有下级人员或将无法购买该商品，确认解除合作吗？',
					success(rs) {
						// 判断是否点击确定
						if (rs.confirm) {}
					}
				});
			},

			// 提出异议
			put() {},

			// 订单详情
			order_detail() {
				return;
				// 请求接口 
				that.request({
					url: '/api/my/order_detail',
					// 上传数据
					data: {
						// 订单id
						order_id: that.id,
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值内容
							that.wrap = rs.data;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 联系商家
			callShop() {
				// 拨打电话
				uni.makePhoneCall({
					phoneNumber: '13979897890',
				})
			},
		},
	};
</script>
<style>
	/* 上背景 */
	.topBg {
		height: 300rpx;
	}

	/* 商品简息 */
	.proDesc {
		margin-top: -150rpx;
	}

	/* 订单简介 */
	.orderDesc {
		line-height: 70rpx;
	}
</style>
